<template>
    <view class="content">
		
	    <uni-card style="margin: 0 24%;">
			<view class="title">感悟记录本</view>
		</uni-card>
		<view style="margin: 10px 33%;">
			<uni-card>书写感悟</uni-card>
		</view>
		<uni-card>
			<view class="uni-textarea">
			    <view class="uni-textarea" style="background-color:rgba(0, 0, 0, 0.1) ; margin: 0px 10px;margin-top: 10px;">
					<textarea placeholder-style="color:#747474;" placeholder="点击输入感悟心得" />
				</view>
			</view>
			<view style="margin: 5px 12px;">
				<u-upload ref="uUpload" :show-progress="true" @on-uploaded="onUploaded" :action="action" max-count="1" :auto-upload="false" width="150px" height="150px"></u-upload>
			</view>
			<!-- 按钮操作 -->
			<view class="converse">
				<u-button  @click="submit" >保存</u-button>
			</view>
		</uni-card>
		<!-- 其他感悟 -->
		<view class="inspirationDrawer">
			<uni-section >
				<view class="example-body">
					<view >
						<button  @click="showDrawer('showLeft')" class=" inspirationOpenButton"><text >我的感悟列表</text></button>
					</view>
					<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
				        <view class="scroll-view">
				        	<scroll-view class="scroll-view-box" scroll-y="true">
						       <view class="close"  v-for="item in recodeList">
							     <uni-section >
									 <view style="font-size: 20px; margin-left: 20px;margin-bottom: 10px;">{{item.name}}</view>
									 <u-line color="error" />
					            <uni-card>
								   <view>{{item.txt}}</view>
								   <img :src="item.picture" style="width: 100px; height: 100px;"/>
								</uni-card>
								<u-line color="info" />
						    </uni-section>
						        </view>
							</scroll-view>
						</view>
					</uni-drawer>
				</view>
		</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				filesArr: [],
				recodeList: [
					{     
					    id:1,
						name:"绒花",
						txt:"我感觉绒花真的很漂亮啊然后芭拉吧拉",
						picture:"https://picx.zhimg.com/70/v2-9d2af00fdc0a22749b4ea57d2e621c7b_1440w.awebp?source=172ae18b&biz_tag=Post"
					},
					{
						id:2,
						name: "宣纸",
						txt: "原来宣纸的制作需要那么那么繁琐的过程巴拉啊啦啦啦啦啦",
						picture:"https://picx.zhimg.com/70/v2-9d2af00fdc0a22749b4ea57d2e621c7b_1440w.awebp?source=172ae18b&biz_tag=Post"
					},
					{
					    id:3,
						name:"绒花",
						txt:"我感觉绒花真的很漂亮啊然后芭拉吧拉",
						picture:"https://picx.zhimg.com/70/v2-9d2af00fdc0a22749b4ea57d2e621c7b_1440w.awebp?source=172ae18b&biz_tag=Post"
					},
					{
						id:4,
						name: "宣纸",
						txt: "原来宣纸的制作需要那么那么繁琐的过程巴拉啊啦啦啦啦啦",
						picture:"https://picx.zhimg.com/70/v2-9d2af00fdc0a22749b4ea57d2e621c7b_1440w.awebp?source=172ae18b&biz_tag=Post"
					},
					
				]
			}
			
		},
		methods: {
			 bindTextAreaBlur: function (e) {
			            console.log(e.detail.value)
			},
			confirm() {},
			// 打开窗口
			showDrawer(e) {
         		this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}},
		    onNavigationBarButtonTap(e) {
			   if (this.showLeft) {
				   this.$refs.showLeft.close()
			   } else {
				   this.$refs.showLeft.open()
			    }
		    },
		    // app端拦截返回事件 ，仅app端生效
		    onBackPress() {
			   if (this.showRight || this.showLeft) {
				   this.$refs.showLeft.close()
				   this.$refs.showRight.close()
				   return true}
		     },
			 submit() {
			 	this.$refs.uUpload.upload();
			},
 			onUploaded(lists) {
 				this.filesArr = lists;
	 			}
	}
</script>

<style lang="scss">
	//首页背景颜色样式
	page{
		background-color: #F4F0E7;
	}
	.content{
		background-color: #F4F0E7;
	}
	.title{
		z-index:99;
		height:30px; 
		line-height: 30px;
		font-family: '微软雅黑';
		margin:0 auto;
		padding-left: 15px;
		color: black; 
		font-size: 25px;
		blackground-color:#fff;
	}
	.converse {
		position: relative;
		top: -160px;
		right: -195px;
		width: 100px;
	}
	.example-body {
		padding: 10px;
		
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.info-content {
		padding: 5px 15px;
	}
	.close {
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	.inspirationDrawer {
		// position: relative;
		// bottom: 40px;
	}
	.inspirationOpenButton {
		position: relative;
		color:#747474;
		blackground-color:#fff;
		
	}
</style>
